/*
 * @Author: hfWang
 * @Date: 2022-12-19 21:40:09
 * @LastEditTime: 2022-12-20 09:18:11
 * @Description: file content
 * @FilePath: \rt-libs\src\ColorPicker\index.tsx
 */
import { Popover } from 'antd';
import React, { useState } from 'react';
import { ColorResult, SketchPicker } from 'react-color';
import './index.less';
import { ColorPickerProps } from './types';

/**
 * 取色器
 */
export default function ColorPicker(props: ColorPickerProps) {
  const { defaultColor = '#8b5df6', showColorInfo = true } = props;
  const [currentColor, setCurrentColor] = useState<string>(defaultColor);

  const getColor = (
    color: ColorResult,
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    props.onChange(color, event);
    setCurrentColor(color.hex);
  };

  return (
    <Popover
      content={<SketchPicker onChange={getColor} />}
      title={null}
      {...props.popoverConf}
    >
      <div className="rt-libs-items-center">
        <div
          className={`rt-libs-color-picker ${props.className}`}
          style={{ backgroundColor: defaultColor }}
        ></div>
        {showColorInfo && (
          <span className="rt-libs-color-font">{currentColor}</span>
        )}
      </div>
    </Popover>
  );
}
